<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation-duration 属性</title>
<style type="text/css">
img{
	position:relative;
	animation-name:mymove;    /*定义动画名称*/
	animation-duration:5s;    /*定义动画时间*/
	-webkit-animation-name:mymove;  /*Chrome浏览器兼容代码 */
	-webkit-animation-duration:5s;
	animation-iteration-count:2;       /*定义动画的播放次数*/
	animation-direction:alternate;     /*定义动画播放的方向*/
	-webkit-animation-iteration-count:2; 
	-webkit-animation-direction:alternate; 
	}
@keyframes mymove{
	from {left:0px; width:200px;}
	to {left:200px; width:400px;}
	}
@-webkit-keyframes mymove{                     /*Chrome浏览器兼容代码*/
	from {left:0px;  width:200px;}             /*动画开始和结束时的状态*/
	to {left:200px;  width:400px;}             /*动画中间时的状态*/
}
</style>
</head>
<body>
<img src="images/box.jpg" >
</body>
</html>